<template>
    <div class="dialog-box" v-if="show">
            <div class="dialog">
                <div class="dialog-bar">{{ title }}</div>
                <div class="dialog-content juzhong">
                    <slot></slot>
                </div>
                <div class="dialog-footer"> 
                    <el-button size="mini" @click="handleClose('取消')">取消</el-button>
                    <el-button size="mini" @click="handleClose('确定')">确定</el-button>
                </div>
            </div>
        </div>
</template>

<script>
export default{
    props:{
        title:String,
        show:{
            type:Boolean,
            default:() => false
        }
    },
    setup(props,{emit}){
        const handleClose = (text) => {
            emit('handleClose:show',text)
        }
        return {
            handleClose
        }
    }
}
</script>

<style scoped lang='scss'>
.juzhong{
    display: flex;
    justify-content: center;
    align-items: center;
}
.dialog-box{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 999;
}
.dialog{
     width: 600px;
     height: 400px;
     color: #fff;
     border-radius: 2rem;
     background-color: #362930;
     .dialog-bar{
         padding: 1.5rem 0 0 2rem;
     }
    .dialog-content{
        height: 80%;   
    }
    .dialog-footer{
        display: flex;
        justify-content: flex-end;
        margin-right: 3rem;
    }
}
</style>